<title>模态框</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">模态框</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">模态框</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Static Modals start -->
<section id="static-modals">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Static Modal</h4>
					<p>Below is a static modal example (meaning its <code>position</code>	and <code>display</code>	have been overridden)</p>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row my-2">
							<div class="col-lg-6 col-md-6 col-sm-12 bd-example-modal">
								<div class="modal open" tabindex="-1" role="dialog">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
												<h5 class="modal-title">Modal title</h5>
												<button type="button" class="close" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<div class="modal-body">
												<p>Modal body text goes here.</p>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-danger">Save</button>
												<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-12">
								<pre class="language-markup">
									<code class="language-markup">
										&lt;div class="modal" tabindex="-1" role="dialog"&gt;
											&lt;div class="modal-dialog" role="document"&gt;
												&lt;div class="modal-content"&gt;
													&lt;div class="modal-header"&gt;
														&lt;h5 class="modal-title"&gt;Modal title&lt;/h5&gt;
														&lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
															&lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
														&lt;/button&gt;
													&lt;/div&gt;
													&lt;div class="modal-body"&gt;
														&lt;p&gt;Modal body text goes here.&lt;/p&gt;
													&lt;/div&gt;
													&lt;div class="modal-footer"&gt;
														&lt;button type="button" class="btn btn-danger"&gt;Save&lt;/button&gt;
														&lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
													&lt;/div&gt;
												&lt;/div&gt;
											&lt;/div&gt;
										&lt;/div&gt;
									</code>
								</pre>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
	<!-- Static Modals end -->

<!-- Basic Modals start -->
<section id="basic-modals">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Basic Modals</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Default Modal</h5>
									<p>Toggle a modal via JavaScript by clicking the button above.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#default">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="default" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel1" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="basicModalLabel1">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">											
											<p>Woohoo, you're reading this text in a modal!</p>											
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Scrolling long content</h5>
									<p> When modals become too long for the user’s viewport or device, they scroll independent of the page itself.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#iconModal">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="iconModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel2" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="basicModalLabel2"><i class="la la-road2"></i> Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
												<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
												<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
												<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
												<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
												<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
												<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
												<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
												<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
												<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
												<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
												<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
												<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
												<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
												<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
												<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
												<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
												<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
												<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Vertically centered</h5>
									<p> Add <code>.modal-dialog-centered</code>	to <code>.modal-dialog</code>	to vertically center the modal.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" data-keyboard="false" data-target="#keyboard1">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="keyboard1" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel3" aria-hidden="true">
										<div class="modal-dialog modal-dialog-centered" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="basicModalLabel3">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
													<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Using the grid</h5>
									<p>Utilize the Bootstrap grid system within a modal by nesting <code>.container-fluid</code>	within the <code>.modal-body.</code>	</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" data-backdrop="false" data-target="#grid-system">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="grid-system" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel4" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="basicModalLabel4">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
													<div class="container-fluid bd-example-row">
														<div class="row">
															<div class="col-md-4">.col-md-4</div>
															<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
														</div>
														<div class="row">
															<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
															<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
														</div>
														<div class="row">
															<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
														</div>
														<div class="row">
															<div class="col-sm-9">
																Level 1: .col-sm-9
																<div class="row">
																	<div class="col-8 col-sm-6">
																		Level 2: .col-8 .col-sm-6
																	</div>
																	<div class="col-4 col-sm-6">
																		Level 2: .col-4 .col-sm-6
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>							
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Disable Animation</h5>
									<p>For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#animation">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal text-left" id="animation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel6" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel6"><i class="la la-tree"></i> Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5><i class="la la-arrow-right"></i> Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5><i class="la la-lightbulb-o"></i> Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											<div class="alert alert-success" role="alert">
												<span class="text-bold-600">Well done!</span> You successfully read this important alert message.
											</div>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Basic Modals end -->

<!-- Modal Options start -->
<section id="modal-options">
		<div class="row">
			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<h4 class="card-title">Modal Options</h4>
						<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
						<div class="heading-elements">
							<ul class="list-inline mb-0">
								<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
								<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
								<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
								<li><a data-action="close"><i class="ft-x"></i></a></li>
							</ul>
						</div>
					</div>
					<div class="card-content collapse show">
						<div class="card-body">
							<div class="row">
								<div class="col-lg-4 col-md-6 col-sm-12 my-1">
									<div class="form-group">
										<h5>Modal With Tooltips and popovers</h5>
										<p>Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.</p>
										<!-- Button trigger modal -->
										<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#tooltipModal">
											Launch Demo Modal
										</button>
	
										<!-- Modal -->
										<div class="modal fade text-left" id="tooltipModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
											<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header">
												<h4 class="modal-title" id="myModalLabel1">Modal With Tooltips and popovers</h4>
												<button type="button" class="close" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												</div>
												<div class="modal-body">
														<h5>Popover in a modal</h5>
														<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-toggle="popover" data-placement="right" data-container="body" data-original-title="Popover on right" data-content="Macaroon chocolate candy. I love carrot cake gingerbread cake lemon drops. Muffin sugar plum marzipan pie.">button</a> triggers a popover on click.</p>
														<hr>														
														<h5>Tooltips in a modal</h5>
														<p><a href="#" class="tooltip-test" title="Tooltip" data-toggle="tooltip" data-original-title="Hover Triggered">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-toggle="tooltip" data-original-title="Hover Triggered">that link</a> have tooltips on hover.</p>
													</div>
												<div class="modal-footer">
												<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
												<button type="button" class="btn btn-danger">Save</button>
												</div>
											</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-lg-4 col-md-6 col-sm-12 my-1">
									<div class="form-group">
										<h5>Modal With Icons</h5>
										<p> With some icons and success alert to give success message.</p>
										<!-- Button trigger modal -->
										<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#iconModal1">
											Launch Demo Modal
										</button>
	
										<!-- Modal -->
										<div class="modal fade text-left" id="iconModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
											<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header">
												<h4 class="modal-title" id="myModalLabel2"><i class="la la-road2"></i> Basic Modal</h4>
												<button type="button" class="close" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												</div>
												<div class="modal-body">
												<h5><i class="la la-arrow-right"></i> Check First Paragraph</h5>
												<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
												<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
												<hr>
												<h5><i class="la la-lightbulb-o"></i> Some More Text</h5>
												<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
												<div class="alert alert-success" role="alert">
													<span class="text-bold-600">Well done!</span> You successfully read this important alert message.
												</div>
												</div>
												<div class="modal-footer">
												<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
												<button type="button" class="btn btn-danger">Save</button>
												</div>
											</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-lg-4 col-md-6 col-sm-12 my-1">
									<div class="form-group">
										<h5>Disable Keyboard</h5>
										<p> By Default, closes the modal when escape key is pressed. Disable keyboard interaction using data-backdrop="false".</p>
										<!-- Button trigger modal -->
										<button type="button" class="btn btn-primary " data-toggle="modal" data-keyboard="false" data-target="#keyboard">
											Launch Demo Modal
										</button>
	
										<!-- Modal -->
										<div class="modal fade text-left" id="keyboard" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
											<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header">
												<h4 class="modal-title" id="myModalLabel3">Basic Modal</h4>
												<button type="button" class="close" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												</div>
												<div class="modal-body">
												<h5>Check First Paragraph</h5>
												<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
												<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
												<hr>
												<h5>Some More Text</h5>
												<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
												</div>
												<div class="modal-footer">
												<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
												<button type="button" class="btn btn-danger">Save</button>
												</div>
											</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-lg-4 col-md-6 col-sm-12 my-1">
									<div class="form-group">
										<h5>Disable Backdrop</h5>
										<p>Disable backdrop element using data-backdrop="false", it includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on outsidedata-backdrop="false" click.</p>
										<!-- Button trigger modal -->
										<button type="button" class="btn btn-primary " data-toggle="modal" data-backdrop="false" data-target="#backdrop">
											Launch Demo Modal
										</button>
	
										<!-- Modal -->
										<div class="modal fade text-left" id="backdrop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
											<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header">
												<h4 class="modal-title" id="myModalLabel4">Basic Modal</h4>
												<button type="button" class="close" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												</div>
												<div class="modal-body">
												<h5>Check First Paragraph</h5>
												<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
												<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
												<hr>
												<h5>Some More Text</h5>
												<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
												</div>
												<div class="modal-footer">
												<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
												<button type="button" class="btn btn-danger">Save</button>
												</div>
											</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-lg-4 col-md-6 col-sm-12 my-1">
									<div class="form-group">
										<h5>Modal Show</h5>
										<p>Manually opens a modal. Returns to the caller before the modal has actually been shown.</p>
										<!-- Button trigger modal -->
										<button type="button" class="btn btn-primary " data-toggle="modal" data-show="false" data-target="#show">
											Launch Demo Modal
										</button>
	
										<!-- Modal -->
										<div class="modal fade text-left" id="show" tabindex="-1" role="dialog" aria-labelledby="myModalLabel5" aria-hidden="true">
											<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header">
												<h4 class="modal-title" id="myModalLabel5">Basic Modal</h4>
												<button type="button" class="close" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												</div>
												<div class="modal-body">
												<h5>Check First Paragraph</h5>
												<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
												<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
												<hr>
												<h5>Some More Text</h5>
												<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
												</div>
												<div class="modal-footer">
												<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
												<button type="button" class="btn btn-danger">Save</button>
												</div>
											</div>
											</div>
										</div>
									</div>
								</div>								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- Modal Options end -->

<!-- Modal Themes start -->
<section id="modal-themes">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Modal Themes</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Primary Modal Template</h5>
									<p>To use primary modal theme, add <code>.bg-primary</code> class to the <code>.modal-header</code> container</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" data-backdrop="false" data-target="#primary">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="primary" tabindex="-1" role="dialog" aria-labelledby="myModalLabel8" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header bg-primary white">
											<h4 class="modal-title white" id="myModalLabel8">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Success Modal Template</h5>
									<p>To use success modal theme, add <code>.bg-success</code> class to the <code>.modal-header</code> container</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-success " data-toggle="modal" data-target="#success">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel9" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header bg-success white">
											<h4 class="modal-title white" id="myModalLabel9"><i class="la la-tree"></i> Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5><i class="la la-arrow-right"></i> Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5><i class="la la-lightbulb-o"></i> Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											<div class="alert alert-success" role="alert">
												<span class="text-bold-600">Well done!</span> You successfully read this important alert message.
											</div>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-success">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Danger Modal Template</h5>
									<p>To use danger modal theme, add <code>.bg-danger</code> class to the <code>.modal-header</code> container</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-danger " data-toggle="modal" data-target="#danger">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="danger" tabindex="-1" role="dialog" aria-labelledby="myModalLabel10" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header bg-danger white">
											<h4 class="modal-title white" id="myModalLabel10">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Info Modal Template</h5>
									<p>To use info modal theme, add <code>.bg-info</code> class to the <code>.modal-header</code> container</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-info " data-toggle="modal" data-backdrop="false" data-target="#info">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel11" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header bg-info white">
											<h4 class="modal-title white" id="myModalLabel11">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-info">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Warning Modal Template</h5>
									<p> To use warning modal theme, add <code>.bg-warning</code> class to the <code>.modal-header</code> container</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-warning " data-toggle="modal" data-target="#warning">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel12" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header bg-warning white">
											<h4 class="modal-title white" id="myModalLabel12"><i class="la la-tree"></i> Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5><i class="la la-arrow-right"></i> Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5><i class="la la-lightbulb-o"></i> Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											<div class="alert alert-success" role="alert">
												<span class="text-bold-600">Well done!</span> You successfully read this important alert message.
											</div>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-warning">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Border Modal Template</h5>
									<p>To use Border color modal theme, add <code>.border-COLORNAME</code> class to the <code>.modal-content</code> container</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-pink	border-pink white" data-toggle="modal" data-target="#border">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="border" tabindex="-1" role="dialog" aria-labelledby="myModalLabel15" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content border-pink">
											<div class="modal-header border-bottom-pink">
											<h4 class="modal-title" id="myModalLabel15"><i class="la la-tree"></i> Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5><i class="la la-arrow-right"></i> Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5><i class="la la-lightbulb-o"></i> Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											<div class="alert alert-success" role="alert">
												<span class="text-bold-600">Well done!</span> You successfully read this important alert message.
											</div>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Modal Themes end -->

<!-- Modal Sizes start -->
<section id="modal-sizes">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Modal Sizes</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Extra Large Modal</h5>
									<p>Add class <code>.modal-xl</code> with <code>.modal-dialog</code> to use extra large size of modal.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-info " data-toggle="modal" data-target="#xlarge">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="xlarge" tabindex="-1" role="dialog" aria-labelledby="myModalLabel16" aria-hidden="true">
										<div class="modal-dialog modal-xl" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel16">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Large Modal</h5>
									<p>Add class <code>.modal-lg</code> with <code>.modal-dialog</code> to use large size of modal.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-info " data-toggle="modal" data-target="#large">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="large" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
										<div class="modal-dialog modal-lg" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel17">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Default Modal Size</h5>
									<p>For <code>default size</code>, modal markup doesn't require any additional sizing class.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-info " data-toggle="modal" data-target="#defaultSize">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="defaultSize" tabindex="-1" role="dialog" aria-labelledby="myModalLabel18" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel18"><i class="la la-tree"></i> Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5><i class="la la-arrow-right"></i> Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5><i class="la la-lightbulb-o"></i> Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											<div class="alert alert-info" role="alert">
												<span class="text-bold-600">Well done!</span> You successfully read this important alert message.
											</div>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Small Modal Size</h5>
									<p>Add class <code>.modal-sm</code> with <code>.modal-dialog</code> to use small size of modal.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-info " data-toggle="modal" data-target="#small">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="small" tabindex="-1" role="dialog" aria-labelledby="myModalLabel19" aria-hidden="true">
										<div class="modal-dialog modal-sm" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel19">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>Extra Small Modal Size</h5>
									<p>Add class <code>.modal-xs</code> with <code>.modal-dialog</code> to use Extra Small size of modal.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-info " data-toggle="modal" data-target="#xSmall">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="xSmall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel20" aria-hidden="true">
										<div class="modal-dialog modal-xs" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel20">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Modal Sizes end -->

<!-- Modal Events start -->
<section id="modal-events">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Modal Events</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<p>Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself</p>
						<div class="row">
							<div class="col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>OnShow Modal Event</h5>
									<p>This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" id="onshowbtn" data-target="#onshow">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="onshow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel21" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel21">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>OnShown Modal Event</h5>
									<p>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" id="onshownbtn" data-target="#onshown">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="onshown" tabindex="-1" role="dialog" aria-labelledby="myModalLabel22" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel22">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>OnHide Modal Event</h5>
									<p>This event is fired immediately when the hide instance method has been called.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" id="onhidebtn" data-target="#onhide">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="onhide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel23" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel23"><i class="la la-tree"></i> Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5><i class="la la-arrow-right"></i> Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5><i class="la la-lightbulb-o"></i> Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											<div class="alert alert-success" role="alert">
												<span class="text-bold-600">Well done!</span> You successfully read this important alert message.
											</div>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-sm-12 my-1">
								<div class="form-group">
									<h5>OnHidden Modal Event</h5>
									<p>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-primary " data-toggle="modal" id="onhiddenbtn" data-target="#onhidden">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="onhidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel24" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h4 class="modal-title" id="myModalLabel24">Basic Modal</h4>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<div class="modal-body">
											<h5>Check First Paragraph</h5>
											<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.</p>
											<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.</p>
											<hr>
											<h5>Some More Text</h5>
											<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.</p>
											</div>
											<div class="modal-footer">
											<button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-danger">Save</button>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Modal Events end -->

<!-- Form Components start -->
<section id="form-components">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Form Components</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-lg-4 col-md-6 col-sm-12">
								<div class="form-group">
									<h5>Login Form</h5>
									<p> Created Simple Login Form.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-warning " data-toggle="modal" data-target="#inlineForm">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="inlineForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
										<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header">
													<label class="modal-title text-text-bold-600" id="myModalLabel33">Inline Login Form</label>
													<button type="button" class="close" data-dismiss="modal" aria-label="Close">
														<span aria-hidden="true">&times;</span>
													</button>
												</div>
												<form action="#">
														<div class="modal-body">
													<label>Email: </label>
													<div class="form-group">
														<input type="text" placeholder="Email Address" class="form-control">
													</div>

													<label>Password: </label>
													<div class="form-group">
														<input type="password" placeholder="Password" class="form-control">
													</div>
													</div>
													<div class="modal-footer">
													<input type="reset" class="btn btn-secondary " data-dismiss="modal" value="close">
													<input type="submit" class="btn btn-primary " value="Login">
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12">
								<div class="form-group">
									<h5>Form with Icons</h5>
									<p>Login Form With Icon.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-warning " data-toggle="modal" data-target="#iconForm">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="iconForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel34" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h3 class="modal-title" id="myModalLabel34">Modal Title</h3>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<form>
											<div class="modal-body">
												<label>Email: </label>
												<div class="form-group position-relative has-icon-left">
													<input type="text" placeholder="Email Address" class="form-control">
													<div class="form-control-position">
														<i class="la la-envelope font-medium-5 line-height-1 text-muted icon-align"></i>
													</div>
												</div>

												<label>Password: </label>
												<div class="form-group position-relative has-icon-left">
													<input type="password" placeholder="Password" class="form-control">
													<div class="form-control-position">
														<i class="la la-lock font-large-1 line-height-1 text-muted icon-align"></i>
													</div>
												</div>
											</div>
											<div class="modal-footer">
												<input type="reset" class="btn btn-secondary " data-dismiss="modal" value="close">
												<input type="submit" class="btn btn-primary " value="Login">
											</div>
											</form>
										</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12">
								<div class="form-group">
									<h5>Bootstrap Input Style Form</h5>
									<p>Bootstrap Form using Floating Label fields.</p>
									<!-- Button trigger modal -->
									<button type="button" class="btn btn-warning " data-toggle="modal" data-target="#bootstrap">
										Launch Demo Modal
									</button>

									<!-- Modal -->
									<div class="modal fade text-left" id="bootstrap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
										<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
											<h3 class="modal-title" id="myModalLabel35"> Modal Title</h3>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
											</div>
											<form>
											<div class="modal-body">
												<fieldset class="form-group floating-label-form-group">
													<label for="email">Email Address</label>
													<input type="text" class="form-control" id="email" placeholder="Email Address">
												</fieldset>
												<br>
												<fieldset class="form-group floating-label-form-group">
													<label for="title">Password</label>
													<input type="password" class="form-control" id="title" placeholder="Password">
												</fieldset>
												<br>
												<fieldset class="form-group floating-label-form-group">
													<label for="title1">Description</label>
													<textarea class="form-control" id="title1" rows="3" placeholder="Description"></textarea>
												</fieldset>
											</div>
											<div class="modal-footer">
												<input type="reset" class="btn btn-secondary " data-dismiss="modal" value="close">
												<input type="submit" class="btn btn-primary " value="Login">
											</div>
											</form>
										</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Form Components end -->

<!-- Varying modal content start -->
<section id="varying-modal">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Varying modal content</h4>
					<p>Buttons that all trigger the same modal with slightly different contents. Use <code>event.relatedTarget</code> and HTML <code>data-*</code> attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.</p>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-lg-6 col-md-12">
								<div class="form-group">
									<p>Below is a live demo followed by example HTML and JavaScript.</p>
									<!-- Button trigger modal -->
									<div class="mb-5">
										<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Modal for @mdo</button>
										<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Modal for @fat</button>
										<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Modal for @getbootstrap</button>
									</div>
									<!-- Modal -->
									<div class="modal fade text-left" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
										<div class="modal-dialog" role="document">
											<div class="modal-content">
												<div class="modal-header">
													<h5 class="modal-title" id="exampleModalLabel">New message</h5>
													<button type="button" class="close" data-dismiss="modal" aria-label="Close">
														<span aria-hidden="true">&times;</span>
													</button>
												</div>
												<div class="modal-body">
													<form>
														<div class="form-group">
															<label for="recipient-name" class="col-form-label">Recipient:</label>
															<input type="text" class="form-control" id="recipient-name">
														</div>
														<div class="form-group">
															<label for="message-text" class="col-form-label">Message:</label>
															<textarea class="form-control" id="message-text"></textarea>
														</div>
													</form>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
													<button type="button" class="btn btn-primary">Send message</button>
												</div>
											</div>
										</div>
									</div>


									<pre class="language-javascript">
										<code class="language-javascript">
											$('#exampleModal').on('show.bs.modal', function (event) {
												var button = $(event.relatedTarget) // Button that triggered the modal
												var recipient = button.data('whatever') // Extract info from data-* attributes
												// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
												// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
												var modal = $(this)
												modal.find('.modal-title').text('New message to ' + recipient)
												modal.find('.modal-body input').val(recipient)
											})
										</code>
									</pre>
								</div>
							</div>
							<div class="col-lg-6 col-md-12">
								<pre class="language-markup">
									<code class="language-markup">
										&lt;button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo"&gt;Open modal for @mdo&lt;/button&gt;
										&lt;button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat"&gt;Open modal for @fat&lt;/button&gt;
										&lt;button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap"&gt;Open modal for @getbootstrap&lt;/button&gt;
										&lt;div class="modal fade text-left" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
											&lt;div class="modal-dialog" role="document"&gt;
												&lt;div class="modal-content"&gt;
													&lt;div class="modal-header"&gt;
														&lt;h5 class="modal-title" id="exampleModalLabel"&gt;New message&lt;/h5&gt;
														&lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
															&lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
														&lt;/button&gt;
													&lt;/div&gt;
													&lt;div class="modal-body"&gt;
														&lt;form&gt;
															&lt;div class="form-group"&gt;
																&lt;label for="recipient-name" class="col-form-label"&gt;Recipient:&lt;/label&gt;
																&lt;input type="text" class="form-control" id="recipient-name"&gt;
															&lt;/div&gt;
															&lt;div class="form-group"&gt;
																&lt;label for="message-text" class="col-form-label"&gt;Message:&lt;/label&gt;
																&lt;textarea class="form-control" id="message-text"&gt;&lt;/textarea&gt;
															&lt;/div&gt;
														&lt;/form&gt;
													&lt;/div&gt;
													&lt;div class="modal-footer"&gt;
														&lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
														&lt;button type="button" class="btn btn-primary"&gt;Send message&lt;/button&gt;
													&lt;/div&gt;
												&lt;/div&gt;
											&lt;/div&gt;
										&lt;/div&gt;
									</code>
								</pre>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Varying modal content end -->
</div>

<script type="text/javascript">
	
</script>